import { useColor } from "palette"
import React from "react"
import { Icon, IconProps, Path } from "./Icon"

export const LinkIcon: React.FC<IconProps> = (props) => {
  const color = useColor()
  return (
    <Icon {...props} viewBox="0 0 23 23">
      <Path
        d="M18.6761 4.3241C20.3689 6.01656 20.3689 8.77157 18.6761 10.464L16.6993 12.4411C16.7512 11.5994 16.6211 10.7485 16.3081 9.95285L17.2364 9.02434C17.5747 8.68606 17.7857 8.26805 17.8694 7.83031C18.0082 7.10458 17.7972 6.32461 17.2364 5.7638C16.3375 4.8647 14.8749 4.86473 13.9759 5.7638L10.4506 9.28901C9.55152 10.1879 9.5516 11.6506 10.4507 12.5496C10.6636 12.7624 10.9084 12.9239 11.1695 13.0352L9.67317 14.5318C9.43902 14.3759 9.21675 14.1955 9.0107 13.9893C7.31787 12.2968 7.31789 9.54178 9.01072 7.84932L12.536 4.32407C14.2286 2.63105 16.9835 2.63108 18.6761 4.3241Z"
        fill={color(props.fill) ?? "#666666"}
        fillRule="evenodd"
        clipRule="evenodd"
      />
      <Path
        d="M12.5495 10.4504C12.3364 10.2374 12.0916 10.0761 11.8306 9.96484L13.327 8.46826C13.5612 8.62407 13.7834 8.80458 13.9893 9.01074C15.6819 10.7032 15.6821 13.4581 13.9893 15.1507L10.4642 18.6759C8.77158 20.3688 6.01653 20.3687 4.32407 18.6759C2.63105 16.9833 2.63108 14.2284 4.3241 12.5358L6.30076 10.5589C6.24877 11.4007 6.37892 12.2517 6.69211 13.0473L5.76361 13.9757C4.86452 14.8748 4.86452 16.3371 5.76361 17.2362C6.66269 18.1353 8.12506 18.1353 9.02414 17.2362L12.5496 13.711C13.4487 12.8119 13.4486 11.3495 12.5495 10.4504Z"
        fill={color(props.fill) ?? "#666666"}
        fillRule="evenodd"
        clipRule="evenodd"
      />
    </Icon>
  )
}
